<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/resources/layout/templateInterno.xhtml"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:fmt="http://java.sun.com/jstl/fmt"
    xmlns:rich="http://richfaces.org/rich">
    
 


 
	<ui:define name="body">

 <style>
        .tooltipData {
            font-weight: bold;
        }
        
        .cellExisteCompromisso {
            font-weight: bold;
            background-color: #FFCCCC;
        }
	  

    </style>
	<div class="grid-11-12">
		<h:panelGroup id="exibirTitulo">
				<div class="grid-11-12">
					<h1>CADASTRAR COMPROMISSO</h1>
				</div>
		</h:panelGroup>
	</div>
	
		<h:form id="cadastroAgendaForm"  styleClass="form">
		
		<div class="field-clear"></div>
		<h:panelGroup id="pgMensagemCompromisso">
			  <div>
					<h:messages style="padding:5px" errorClass="errorMessage" infoClass="infoMessage"  />
			</div>
		</h:panelGroup>
		<div class="grid-8-12">
			<t:fieldset style="width:550px" legend="DADOS COMPROMISSO">
				<h:panelGroup id="dadosCompromisso">
					
						<div class="field-clear"></div>
						<div class="grid-7-12">
								<a4j:outputPanel  id="outpDataCorrete">
									<h:panelGroup rendered="#{calendarDataModel.dataCorrente != null}">
											<h:outputLabel class="form-lbl" value="DATA SELECIONADA: #{calendarDataModel.dataCorrente}" style="COLOR: #000000; FONT-WEIGHT: bold; FONT-SIZE: medium;"/> 
									</h:panelGroup>
								</a4j:outputPanel>
						</div>
						<h:panelGroup style="width:300px" id="editContent">
							
							
							<div class="field-clear"></div>
							<div class="grid-5-12">
								<h:outputLabel id="lbTitulo"	class="form-lbl" value="Título:" /> 
								<h:inputText id="inptTitulo" required="true" label="Título" value="#{calendarDataModel.agenda.titulo}"  styleClass="form-txt" maxlength="40"  />
							</div>
							<h:panelGroup rendered="false">
								<div class="grid-4-12">
									<h:outputLabel id="lbTipoCompromisso" class="form-lbl" value="Tipo Compromisso:" /> 
									<h:selectOneMenu id="cbTipoCompromisso"  label="Tipo Compromisso" styleClass="form-select"
										value="#{calendarDataModel.agenda.tipo}">
										<f:selectItem itemLabel="Selecione ..." itemValue="" />
										<f:selectItem itemLabel="Toda Igreja" itemValue="TI" />
										<f:selectItem itemLabel="Grupo de Pessoas" itemValue="GP" />							
									</h:selectOneMenu>
								</div>
							</h:panelGroup>
						<div class="field-clear"></div>
						<div class="grid-2-12" style="padding-left:  40px" >
						<h:panelGroup id="pgExibirTable">
						 	<rich:dataTable  
	                  			     rowClasses="odd, even" rows="3"
	                  			styleClass="dataTable rich-table rich-table-cell ui-widget-content ui-grid-content"
	                   			width="400" border="0" align="center" id="igrejaTable"  var="igreja" value="#{calendarDataModel.listaIgreja}" >
							  <f:facet  name="header">
			                    <rich:columnGroup >
			                            <rich:column  style="text-align: center; width:10px"  styleClass="ui-state-default" >
			                                <strong><h:outputText  /></strong>
			                            </rich:column>
			                            <rich:column  style="text-align: center; width:300px"  styleClass="ui-state-default" >
			                                <strong><h:outputText value="Igreja" /></strong>
			                            </rich:column>
			                    	</rich:columnGroup>
			                  </f:facet>
			 				<rich:columnGroup >	
		 					<rich:column  style="text-align: center;" >
								<h:selectBooleanCheckbox disabled="#{igreja.desabilitado}" id="checkStCadastro"  styleClass="form-txt" value="#{igreja.selecionado}" >
								<a4j:support event="onclick" ajaxSingle="true" action="#{calendarDataModel.adicionarIgreja}">
									<f:setPropertyActionListener value="#{igreja}" target="#{calendarDataModel.igrejaSelecionada}" />
								</a4j:support>
							</h:selectBooleanCheckbox>
							</rich:column>	
							<rich:column  style="text-align: center;" >
								<h:outputText value="#{igreja.nome}" />
							</rich:column>	
							
						</rich:columnGroup>
					</rich:dataTable>
					 <div class="field-clear"></div>
					<div class="grid-12-12">
						<rich:datascroller align="center" status="" renderIfSinglePage="false" for="igrejaTable" />
					</div>
				</h:panelGroup>
			</div>
							
							<div class="field-clear"></div>
							<div class="grid-2-12">
								<h:outputLabel id="lbHoraInicio" class="form-lbl" value="Hora Início:" /> 
								<h:inputText id="inptHoraInicio" required="true" label="Hora Início" maxlength="5"   styleClass="form-txt" 	value="#{calendarDataModel.agenda.horaInicio}">
									 <rich:jQuery selector="#inptHoraInicio" query="mask('99:99')" timing="onload"/>
								</h:inputText>
								
							</div>
							<div class="grid-2-12"> 
								<h:outputLabel id="lbHoraFim" class="form-lbl" value="Hora Fim:" /> 
								<h:inputText id="inptHoraFim" required="true" label="Hora Fim" maxlength="5"  styleClass="form-txt" value="#{calendarDataModel.agenda.horaFim}" >
									 <rich:jQuery selector="#inptHoraFim" query="mask('99:99')" timing="onload"/>
								</h:inputText>
							</div>
							<div class="field-clear"></div>
							<div class="grid-7-12">
								<h:outputLabel id="lbDescricao" class="form-lbl" value="Descrição:" />
								 <h:inputTextarea style="width: 500px; height: 80px" styleClass="form-txt" value="#{calendarDataModel.agenda.descricao}" />
							</div>					
						</h:panelGroup>
					
						<div class="field-clear"></div>
						<div class="grid-2-12" >
									<a4j:commandButton value="Salvar" action="#{calendarDataModel.salvarCompromisso}" styleClass="form-button" id="storebutton"								
										reRender="cadastroAgendaForm" />
								</div>
							<div class="grid-2-12">
								<a4j:commandButton ajaxSingle="true" value="Limpar"  immediate="true" action="#{calendarDataModel.limpar}" styleClass="form-button" id="limpar"								
										reRender="dadosCompromisso,pgExibirTable" />
							</div>
							<div class="grid-2-12">
								<a4j:commandButton ajaxSingle="true" value="Voltar"  immediate="true" action="#{calendarDataModel.voltar}" styleClass="form-button" id="voltar"								
										 />
							</div>
						<div class="field-clear"></div>
						<div class="grid-12-12">
						 <a4j:outputPanel id="panelCompromissoCadastrado" ajaxRendered="true"> 
							 <rich:dataTable style="width: 500px; border:1px" id="tbCompromisso"
							 rendered="#{not empty calendarDataModel.listaCompromisso}"
							 rowClasses="odd, even" rows="3"	styleClass="dataTable rich-table rich-table-cell ui-widget-content ui-grid-content" 
							  var="compromisso" value="#{calendarDataModel.listaCompromisso}" >
							  <f:facet  name="header">
						                    <rich:columnGroup >
						                            <rich:column style="text-align: left;width:110px"  styleClass="ui-state-default" >
						                                <strong><h:outputText value="Título" /></strong>
						                            </rich:column>
						                            <rich:column style="text-align: center;width:20px" styleClass="ui-state-default" >
						                                <strong><h:outputText value="Hora Início" /></strong>
						                            </rich:column>
						                            <rich:column style="text-align: center;width:20px" styleClass="ui-state-default" >
						                                <strong><h:outputText value="Hora Fim" /></strong>
						                            </rich:column>
						                            <rich:column style="text-align: center; width:10px"  styleClass="ui-state-default" >
						                                <strong><h:outputText value="Ações" /></strong>
						                            </rich:column>
						                    	</rich:columnGroup>
						                  </f:facet>
						 				<rich:columnGroup >				
											<rich:column  style="text-align: left;width:20px" >
												<h:outputText value="#{compromisso.titulo}" />
											</rich:column>
											 <rich:column  style="text-align: center;width:20px" >
												<h:outputText value="#{compromisso.horaInicio}" />
											</rich:column>	
											 <rich:column  style="text-align: center;width:20px" >
												<h:outputText value="#{compromisso.horaFim}" />
											</rich:column>
											 <rich:column  style="text-align: center" >	
											 <a4j:commandLink id="editarCompromisso" ajaxSingle="true" action="#{calendarDataModel.carregarIgrejasSelecionadas}" reRender="editContent,pgExibirTable"  >
											 	<h:graphicImage value="/resources/imagens/ico_editar.gif" id="gIEdidar" styleClass="hidelink"/>
											 		<f:setPropertyActionListener target="#{calendarDataModel.agenda}" value="#{compromisso}"/> 
											 	</a4j:commandLink>
												<a4j:commandLink id="removerCompromisso" onclick="Richfaces.showModalPanel('modalPanelConfirmaExcluir');"  ajaxSingle="true" reRender="tbCompromisso,pgMensagemCompromisso,panelCompromissoCadastrado"  >
											 		<f:setPropertyActionListener target="#{calendarDataModel.compromissoSelecionado}" value="#{compromisso}"/>
											 		<h:graphicImage value="/resources/imagens/ico_excluir.gif" id="gIExcluirUsers" styleClass="hidelink"/> 
											 	</a4j:commandLink>
											 </rich:column> 
										</rich:columnGroup>
							</rich:dataTable> 
								<div  class="grid-12-12">
									<div  style="text-align: center">
											<rich:datascroller align="center" renderIfSinglePage="false" for="tbCompromisso" />
									</div>
								</div>
						</a4j:outputPanel>
					</div>
					</h:panelGroup>	
				</t:fieldset>
			</div>	
		<div class="grid-4-12">
			<a4j:region>
			<h:panelGroup id="pgCalendar" layout="block" style="width: 300px">
			 <a4j:jsFunction name="ajaxSubmit" reRender="dadosCompromisso,outpDataCorrete,pgMensagemCompromisso" />
				                  
			 <a4j:jsFunction id="obtemDia" name="obterDia" action="#{calendarDataModel.exibirCompromisso}" reRender="panelCompromissoCorrente" >
				 <a4j:actionparam name="param1" assignTo="#{calendarDataModel.dados}"  />                  
			 </a4j:jsFunction>
			 <a4j:jsFunction id="nextDate" name="obterDataAlterada"  reRender="organizer,sample3" action="#{calendarDataModel.recarregarCalendario}"  >
			 </a4j:jsFunction>
			
				<rich:calendar id="organizer"
					 popup="false"
					value="#{agendaBean.selectedDate}"
					 showApplyButton="true"
					cellWidth="38px" 
					cellHeight="38px" 
					boundaryDatesMode="none"
					showWeeksBar="false"
					dataModel="#{calendarDataModel}"
					oncurrentdateselected="obterDataAlterada()"				
					firstWeekDay="0" 
					todayControlMode="hidden"
					minDaysInFirstWeek="2"
					onchanged="if (event.rich.date) {ajaxSubmit();}"
					valueChangeListener="#{calendarDataModel.valueChanged}" >
					
				 <a4j:outputPanel  layout="block" id="cell"  onclick="#{rich:component('organizer')}.resetSelectedDate()" style="height: 100%;" styleClass="organizer-cell">
	                <div>
	                     <h:outputText id="c"  value="{day}" style="align:center"/>
	                </div>
					<div>&#xA0;</div>
	                <div>
	                
							 <h:outputText value="{data.adicionar}" style="align:center"/>
	                    
	                </div>
	              
	            </a4j:outputPanel>
				</rich:calendar>
				
				
				</h:panelGroup>
					</a4j:region>
			</div>	
			
		</h:form>
		
		
		
		<rich:modalPanel id="modalPanelConfirmaExcluir" width="280"
					autosized="false" resizeable="false" height="110">
			<div class="form">
			<h:form id="fomModal" >
					<center>
						<div style="margin-left: 40px; margin-bottom: 30px" class="grid-9-12" >
							<h:outputText styleClass="infoRegistroNaoEnc" value="#{msg['info.MSG_02']}"  />
						</div>	
						 <div class="field-clear"></div>
						<div style="margin-left: 60px" class="grid-3-12" >
							<a4j:commandButton ajaxSingle="true" value="Confirmar" action="#{calendarDataModel.removerCompromisso}" 
								id="btnConfirmar" styleClass="form-button"
								reRender="cadastroAgendaForm" oncomplete="Richfaces.hideModalPanel('modalPanelConfirmaExcluir');"  style="width=50px">
							</a4j:commandButton>
						</div>	
						<div style="margin-left: 10px" class="grid-3-12" >
							<a4j:commandButton ajaxSingle="true" value="Cancelar" 				id="btnCancelar" styleClass="form-button"
								onclick="Richfaces.hideModalPanel('modalPanelConfirmaExcluir');"  style="width=50px">
							</a4j:commandButton>
						</div>	
					</center>
		</h:form>
		</div>
		</rich:modalPanel>
		
		<t:saveState  value="#{calendarDataModel.listaCompromisso}"/>
		<t:saveState  value="#{calendarDataModel.agenda}"/>
		<t:saveState  value="#{calendarDataModel.dataCorrente}"/>

</ui:define>

</ui:composition>
